<template>
  <div>
    <div style="position: relative;">
      <el-row :gutter="10" class="mb8" style="float:left; width: 100%;">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd()"
            v-hasPermi="['hr:employee:add']"
          >新增
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            :disabled="tableSelectedData.length !== 1"
            @click="handleUpdate()"
            v-hasPermi="['hr:employee:edit']"
          >修改
          </el-button>
        </el-col>


        <el-col :span="1.5">
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            :disabled="tableSelectedData.length !== 1"
            @click="handleDelete()"
            v-hasPermi="['hr:employee:remove']"
          >离职
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-document"
            size="mini"
            :disabled="tableSelectedData.length !== 1"
            @click="handleViewSalary()"
            v-hasPermi="['hr:employee:salaryMonth']"
          >薪资查看
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-s-custom"
            size="mini"
            :disabled="tableSelectedData.length !== 1"
            @click="handleUniform()"
            v-hasPermi="['hr:employee:salaryMonth']"
          >工装管理
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['hr:employee:export']"
          >导出
          </el-button>
        </el-col>
      </el-row>
      <div style="position: absolute; right: 10px; top: 0; height: 28px; line-height: 28px;">
        <span style="color: #409EFF;">负责人：{{departmentData.chargeNickName || '无'}}</span>
        <span style="margin-left: 15px; color: #67C23A;">助手：{{departmentData.assistantNickName || '无'}}</span>
      </div>
    </div>
    <template>
      <el-table
        class="list-table"
        v-loading="listLoading"
        :data="listData"
        stripe
        size="small"
        fit
        highlight-current-row
        :default-expand-all="isExpand"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        @selection-change="handleSelectionChange"
        style="width: 100%;">
        <el-table-column type="selection" align="center" width="55"/>
        <el-table-column :show-overflow-tooltip="true" prop="name" width="120" align="center">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">姓名</p>
          </template>
          <template slot-scope="scope">
            <!--<span v-if="+scope.row.status === 1" style="color: #E6A23C;">{{`${scope.row.name}`}}</span>-->
            <!--<span v-else-if="+scope.row.status === 20" style="color:#909399;text-align: center;width: 80px;">{{`${scope.row.name}`}}</span>-->

            <el-tag v-if="+scope.row.status === 1" type="warning" size="small"
                    style="color:#343434;text-align: center;width: 80px;">
              {{`${scope.row.name}`}}
            </el-tag>

            <span v-else-if="+scope.row.status === 20" style="color:#909399;text-align: center;width: 80px;">{{`${scope.row.name}`}}</span>

            <!--<el-tag v-else-if="+scope.row.contractSatatus !== 1 " type="warning" size="small"
                    style="color: rgb(51, 51, 51);width: 100%;height: 44px;position: absolute;top: 0px;left: 0px;background-color:#ed9170;text-align: center;line-height: 44px;font-size: 17px;">{{`${scope.row.name}`}}
            </el-tag>-->
            <el-tag v-else-if="+scope.row.contractSatatus !== 1 " type="danger" size="small"
                    style="color:#343434;text-align: center;width: 80px;">
              {{`${scope.row.name}`}}
            </el-tag>
            <span v-else>{{`${scope.row.name}`}}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="certNo" width="160">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">身份证</p>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="phone" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">手机号</p>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="deptId" width="110">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">所属部门</p>
          </template>
          <template slot-scope="scope">
            <span>{{`${scope.row.deptName}`}}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="socialInsurancePlaceName" width="110">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">社保缴纳地</p>
          </template>
          <template slot-scope="scope">
            <span>{{`${scope.row.socialInsurancePlaceName?scope.row.socialInsurancePlaceName:''}`}}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="deptId" width="110">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">职务</p>
          </template>
          <template slot-scope="scope">
            <span>{{`${scope.row.postName}`}}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="bankNo" width="160">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">银行卡</p>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="openingBank" width="160">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">开户行</p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="status">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">状态</p>
          </template>
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | employeeStatus" size="small">{{scope.row.status |
              employeeStatus('text')}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="createTime" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">创建日期</p>
          </template>
          <template slot-scope="scope">
            <div>{{scope.row.createTime | formatDate('yyyy-MM-dd')}}</div>
          </template>
        </el-table-column>
        <el-table-column ref="actionColumn" fixed="right" align="left" label="操作" :width="actionWidth"
                         class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button ref="actionEdit"

                       type="primary"
                       size="mini"
                       icon="el-icon-edit"
                       @click="handleUpdate(scope.row)"
                       v-hasPermi="['hr:employee:edit']"></el-button>
            <el-button ref="actionView"
                       type="success"
                       size="mini"
                       icon="el-icon-view"
                       @click="handleView(scope.row)"></el-button>
            <el-button ref="actionDelete"
                       type="warning"
                       size="mini"
                       icon="el-icon-setting"
                       @click="handleDelete(scope.row)"
                       v-hasPermi="['hr:employee:remove']"></el-button>
            <slot name="rights" :row-data="scope.row"></slot>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="searchKey.pageNum" :page-sizes="[10, 20, 50, 100, 200]"
                     :page-size="searchKey.pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { debounce } from 'lodash'
  import { mapGetters } from 'vuex'
  import commonMixins from '@/mixins/common'
  import filters from '@/filters/filters'
  import tagFilter from '@/filters/tagFilter'

  export default {
    name: 'RecordTable',
    mixins: [commonMixins, tagFilter, filters],
    components: {},
    data() {
      return {
        searchKey: {},
        isExpand: true,
        tableSelectedData: [], // 选中的表数据
        listData: [] // 列表数据
      }
    },
    props: {
      data: { // 列表数据
        type: Array,
        required: true,
        default() {
          return []
        }
      },
      departmentData: { // 部门详情数据
        type: Object,
        required: true,
        default() {
          return {}
        }
      },
      searchParams: { // 搜索参数
        type: Object,
        required: true,
        default() {
          return {}
        }
      },
      totalCount: {
        type: [String, Number],
        required: true,
        default: 0
      },
      listLoading: {
        type: [Boolean],
        required: true,
        default: false
      }
    },
    computed: {
      ...mapGetters('user', [
        'userInfo'
      ]),
      actionWidth() {
        let { permissionValue, baseWidth } = {
          baseWidth: 60,
          permissionValue: ['hr:employee:edit', 'hr:employee:remove']
        }
        let width = baseWidth
        let all_permission = '*:*:*'
        let permissions = this.$store.getters.permissions
        if (permissionValue.length > 0) {
          let isAllPermission = permissions.some(permission => { // 是否全部权限
            return all_permission === permission
          })
          let existingPermissions = permissions.filter(permission => { // 存在的权限
            return permissionValue.includes(permission)
          })
          if (isAllPermission) {
            width += permissionValue.length * 60
          } else {
            width += existingPermissions.length * 60
          }
        }
        return width
      }
    },
    methods: {
      handleSizeChange(val) { // 分页改变每页条数
        this.searchKey.pageSize = val
        this.$emit('on-init', this.searchKey)
      },
      handleCurrentChange(val) { // 分页切换分页
        this.searchKey.pageNum = val
        this.$emit('on-init', this.searchKey)
      },
      handleSelectionChange(selection) { // 多选框选中数据
        this.tableSelectedData = selection
      },
      handleAdd(data = null) { // 新增按钮操作
        this.$emit('on-edit', data)
      },
      handleUpdate(data = null) { // 修改按钮操作
        let { tableSelectedData } = this
        this.$emit('on-edit', data || tableSelectedData[0])
      },
      handleDelete(data = null) { // 离职
        let { tableSelectedData } = this
        this.$emit('on-delete', data || tableSelectedData[0])
      },
      handleView(data = null) { // 查看详情－显示弹出框
        this.$emit('on-view', data)
      },
      handleUniform(data = null) { // 工装管理
        let { tableSelectedData } = this
        let detailData = data || tableSelectedData[0]
        this.$router.push({
          name: 'uniformList',
          query: {
            employeeId: detailData.id
          }
        })
      },
      handleExpand: debounce(function() { // 查询，防抖
        this.isExpand = !this.isExpand
        this.$emit('on-init', this.searchKey)
      }, 300),
      handleExport: debounce(function() { // 导出，防抖
        console.log(this.searchKey)
        this.$emit('on-export', this.tableSelectedData)
      }, 300),

      handleViewSalary: debounce(function(data = null) { // 查看薪资历史
        let { tableSelectedData } = this
        let params = data || tableSelectedData[0]

        this.$router.push({
          name: 'SalaryHistory',
          params
        })
      }, 300)
    },
    watch: {
      data: {
        handler: function(newVal, oldVal) {
          if (JSON.stringify(newVal) !== JSON.stringify(this.listData)) {
            this.listData = JSON.parse(JSON.stringify(newVal))
          }
        },
        deep: true,
        immediate: true
      },
      searchParams: {
        handler: function(newVal, oldVal) {
          if (JSON.stringify(newVal) !== JSON.stringify(this.searchKey)) {
            this.searchKey = JSON.parse(JSON.stringify(newVal))
          }
        },
        deep: true,
        immediate: true
      }
    },
    created() {
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  .list-table {
    .el-button--mini {
      padding: 7px 15px;
      width: 45px;
      color: #fff;
    }

    & /deep/ .el-table__header-wrapper {
      th {
        background-color: #fff;
      }
    }
  }
</style>
